<template>
  <div>
    <el-dialog @close="$refs.addFormRef.resetFields()" title="添加用户" :visible.sync="addDialogVisible" width="50%">
      <!-- 内容主体区域 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="110px">
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model="addForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input type="textarea" v-model="addForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addRoleApi } from '@/api/role'
export default {
  props: {
    // props值只能在视图中使用，不能直接把它赋值给当前组件data中的某个选项
    rolesList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 侦听props值的改变
    $props: {
      handler(newVal) {
        // 给当前的组件的数据赋props里面的数据
        this.list = newVal.rolesList
      },
      deep: true
    }
  },
  data() {
    // 角色名的唯一性验证
    const checkRoleName = (rule, value, callback) => {
      const role = this.list.find(item => item.roleName === value)
      if (role && role.roleName) {
        return callback(new Error('角色名称重复'))
      }
      callback()
    }
    return {
      list: [],
      addDialogVisible: false,
      // 表单数据
      addForm: {
        roleName: '',
        roleDesc: ''
      },
      // 验证表单
      addFormRules: {
        roleName: [{
          required: true, message: '请输入角色名', trigger: 'blur'
        }, {
          validator: checkRoleName, trigger: 'blur'
        }],
        roleDesc: [{
          required: true, message: '请输入角色描述', trigger: 'blur'
        }, {
          min: 3, max: 20, trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    // 打开对话框
    open() {
      this.addDialogVisible = true
    },
    // 重置表单
    resetForm() {
      this.$refs.addFormRef.resetFields()
    },
    // 添加角色
    addRole() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) {
          return this.$message.error('验证不通过!')
        }
        const res = await addRoleApi(this.addForm)
        if (res.meta.status !== 201) {
          return this.$message.error('创建角色不成功')
        }
        this.$message.success('创建成功')
        this.addDialogVisible = false
        // 方式一： 触发父组件的方法
        // this.$emit('on-add-role', res.data)
        // 方式二：利用引用传值可以改变props的数据
        // 模板中的方法，是可以获取到props里面的数据
        // eslint校验不通过，因为eslint规定不能直接修改props值,但是当前要修改的数据是一个引用传值的数据，可以进行更改的，但是需要eslint做注释
        const { roleId: id, roleName, roleDesc } = res.data
        // eslint-disable-next-line vue/no-mutating-props
        this.rolesList.push({ id, roleName, roleDesc, children: [] })
        console.log(this.rolesList)
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>